<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>开票信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="address-rece container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <!--        <div style="height:91px;"></div>-->
                <div class="line-ti">
                    <div>开票信息管理</div>
                </div>
                <ul class="ul">
                    <router-link class="li" :to="`/billInfoEdit?id=${item.id}`" v-for="(item,index) in invoiceLists" :key="index">
                        <div class="li-top">
                            <div class="idcard" v-if="item.type == 0">个人</div>
                            <div class="idcard" v-if="item.type == 1">公司</div>
                            <div class="div" v-if="item.is_default == 1">默认</div>
                        </div>
                        <div class="li-center">
                            <div class="name">名称：{{item.name}}</div>
                            <div class="info">
                                <div>联系电话：{{item.phone}}</div>
                                <div>识别号：{{item.identifier}}</div>
                            </div>
                            <div class="info">
                                <div>开户行：{{item.bank}}</div>
                                <div>银行卡号：<div class="flex">{{item.card_no}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="li-bottom">
                            收票信息：{{item.type1_address}} {{item.type1_username}} {{item.type1_phone}}
                        </div>
                    </router-link>
                    <div class="nodata" style="width:100%" v-if="invoiceLists.length == 0">
                        <img style="margin:0 auto;display:block" :src="$global.Image.noOrder" />
                    </div>
                </ul>
                <div class="pagination-box" v-if="invoiceLists.length != 0">
                    <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="limit" :total="count">
                    </el-pagination>
                </div>
                <div class="btn-list">
                    <router-link class="green" :to="`/billInfoSet`">开发票</router-link>
                    <router-link class="blue" :to="`/billInfoAdd`">新增开票信息</router-link>
                    <router-link class="red" :to="`/billInfoList`">开票记录</router-link>
                </div>
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import { getInvoiceList } from "@api/user";

export default {
    components: {
        leftNavBar,
    },
    data() {
        return {
            active: 7,
            page: 1,
            limit: 20,
            count: "",
            invoiceLists: [],
            addressType: "",
        };
    },
    mounted() {
        this.invoiceList();
    },
    methods: {
        /**
         * 获取地址列表
         *
         */
        invoiceList() {
            let that = this;
            getInvoiceList({ page: that.page, limit: that.limit }).then(
                (res) => {
                    that.invoiceLists = res.data.list;
                    that.count = res.data.count;
                }
            );
        },
        // 页面变更
        pageChange(value) {
            this.page = value;
            this.invoiceList();
        },
        //删除窗口
        openDel(index) {
            this.$confirm("确定要删除此地址吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.delAddress(index);
            });
        },
        /**
         * 删除地址
         */
        delAddress(index) {
            let that = this;
            let address = this.addressList[index];
            let id = address.id;
            getAddressRemove(id).then(function () {
                that.$dialog.toast({
                    mes: "删除成功!",
                    callback: () => {
                        that.addressList.splice(index, 1);
                        that.$set(that, "addressList", that.addressList);
                    },
                });
            });
        },
        /**
         * 设置默认地址
         */
        radioChange(index) {
            let that = this,
                address = this.addressList[index],
                id = address.id;
            getAddressDefaultSet(id).then(function () {
                for (var i = 0, len = that.addressList.length; i < len; i++) {
                    if (i === index) that.addressList[i].is_default = 1;
                    else that.addressList[i].is_default = 0;
                }
                that.$set(that, "addressList", that.addressList);
            });
        },
        /**
         * 新增地址
         */
        showAddDialog() {
            this.addressType = "新增";
            this.$refs["addressDialog"].showAddDialog(() => {
                this.AddressList();
            });
        },
        /**
         * 编辑地址
         */
        showEditDialog(id) {
            this.addressType = "编辑";
            if (!id) return false;
            this.$refs["addressDialog"].showEditDialog(id, () => {
                this.AddressList();
            });
        },
    },
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.address-rece {
    /*width: 70%;*/
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;
            position: relative;
            &::before {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 72px;
                height: 3px;
                content: "";
                background: $color;
            }
            > div {
                color: #da213d;
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold;
                // width: 90px;
                line-height: 36px;
                font-weight: 600;
                // text-align: center;
            }
        }
        .btn-list {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 45px;
            text-align: center;
            .green {
                width: 270px;
                height: 44px;
                background: #45b39c;
                border-radius: 5px;
                font-size: 16px;
                color: #ffffff;
                line-height: 44px;
                cursor: pointer;
            }
            .blue {
                width: 270px;
                height: 44px;
                background: #3ca9d7;
                border-radius: 5px;
                font-size: 16px;
                color: #ffffff;
                line-height: 44px;
                cursor: pointer;
            }
            .red {
                width: 270px;
                height: 44px;
                background: linear-gradient(143deg, #da213d 0%, #da213d 100%);
                border-radius: 5px;
                font-size: 16px;
                color: #ffffff;
                line-height: 44px;
                cursor: pointer;
            }
        }
        .ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .li {
                margin-top: 30px;
                width: 440px;
                height: 190px;
                box-shadow: 0px 0px 5px 0px rgba(17, 17, 17, 0.16);
                border-radius: 5px;
                padding: 0 10px 10px 20px;
                box-sizing: border-box;
                .li-top {
                    display: flex;
                    padding-bottom: 8px;
                    position: relative;
                    &::before {
                        content: "";
                        bottom: 0;
                        left: -12px;
                        position: absolute;
                        width: 324px;
                        border-bottom: 1px dashed #eee8e8;
                    }
                    .idcard {
                        margin-left: 20px;
                        width: 40px;
                        height: 35px;
                        background: url("../../../assets/second_icon/tags.png")
                            no-repeat;
                        background-size: 100% 100%;
                        text-align: center;
                        line-height: 30px;
                        font-size: 13px;
                        color: #ffffff;
                    }
                    .div {
                        margin: 12px 10px 0 auto;
                        width: 39px;
                        height: 20px;
                        background: linear-gradient(
                            143deg,
                            #da213d 0%,
                            #da213d 100%
                        );
                        border-radius: 2px;
                        font-size: 13px;
                        color: #ffffff;
                        line-height: 20px;
                        text-align: center;
                    }
                }
                .li-center {
                    .name {
                        font-size: 15px;
                        font-weight: bold;
                        color: #333333;
                        margin: 10px 0;
                        line-height: 15px;
                    }
                    .info {
                        display: flex;
                        align-items: center;
                        margin-bottom: 5px;
                        div {
                            flex: 1;
                            font-size: 13px;
                            color: #333333;
                            display: flex;
                            align-items: center;
                            .flex {
                                text-overflow: -o-ellipsis-lastline;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 1;
                                -webkit-box-orient: vertical;
                                width: 100%;
                            }
                        }
                    }
                }
                .li-bottom {
                    font-size: 13px;
                    color: #333333;
                    line-height: 18px;
                    margin-top: 10px;
                    position: relative;
                    padding-top: 10px;
                    box-sizing: border-box;
                    &::before {
                        position: absolute;
                        left: -12px;
                        top: 0px;
                        width: 324px;
                        content: "";
                        border-top: 1px dashed #eee8e8;
                    }
                }
            }
        }
    }
}
</style>
